<template>
  <div class="father">
    {{msg}}
    <button @click="updateMsg">更新msg</button>
    <button @click="handleClick">点击销毁组件</button>
    <son :msg="msg"></son>
  </div>
</template>
<script>
import son from './components/son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      msg: "hello",
    };
  },
  methods: {
    handleClick() {
      // 调用这个方法可以销毁组件
      this.$destroy()
    },
    updateMsg() {
      this.msg = 'itcast'
    }
  },
  beforeCreate() {
    console.log("实例创建之前");
    console.log(this.msg);
    // $el代表组件的根元素
    console.log(this.$el);
  },
  // 实例创建完成后自动调用，这里已经完成了数据的检测，但是还没有挂载，$el还无法使用
  // 开发时，常在它里面去发送异步请求获取数据 ⭐ （另外一个原因是，如果用vue做服务端渲染的话，它没有mounted这个生命周期）
  created() {
    console.log("实例创建之后");
    console.log(this.msg);
    console.log(this.$el);
  },
  beforeMount() {
    console.log("挂载之前");
    console.log(this.msg);
    console.log(this.$el);
  },
  // 组件挂载以后调用，如果项目中有操作dom，请在这里完成
  mounted() {
    console.log("挂载之后");
    console.log(this.msg);
    console.log(this.$el);
  },
  // 实例销毁之前调用，一般用来清除定时器，或者解绑事件
  beforeDestroy() {
    console.log("销毁之前");
    console.log(this.msg);
    console.log(this.$el);
  },
  destroyed() {
    console.log("销毁之后");
    console.log(this.msg);
    console.log(this.$el);
  },

  beforeUpdate() {
    console.log("更新之前");
    console.log(this.msg);
    console.log(this.$el);
  },
  updated() {
    console.log("更新之后");
    console.log(this.msg);
    console.log(this.$el);
  },
};
</script>
<style>
</style>